<template>
    <div class="login">
        <div class="login-form">
            <div class="form-item">
                <input type="text" placeholder="请输入账号" @input="handleInputName" placeholder-class="phcolor">
            </div>
            <div class="form-item">
                <input type="text" placeholder="请输入密码" @input="handleInputPassword"  placeholder-class="phcolor">
            </div>
            <div class="submit-btn" @click="handleSubmit">登录</div>
        </div>
        <div class="reset-form"></div>
        
        <div class="tips-box">
            <div class="tips-text" @click="handleResign">注册账号</div>
            <div class="tips-text" @click="handleTo">重置密码</div>
            <div class="tips-text" @click="handleOpenServiceDialog">联系客服</div>
        </div>
        <van-dialog id="van-dialog" confirm-button-color="#5581FA"/>
    </div>
</template>

<script>
import Dialog from '@/wxcomponents/vant/dist/dialog/dialog';
import {getServiceConf, userRequest} from '@/api'
export default {
    name: "login",
    data() {
        return {
            showPopover: false,
            ruleForm: {
                username: '',
                password: ''
            }
        }
    },
    methods: {
        handleInputName(value) {
            console.log('zhanghao',value)
            this.ruleForm.username = value.detail.value
            
        },
        handleInputPassword(value) {
            console.log('mima ',value)
            this.ruleForm.password = value.detail.value
    
        },
        handleSubmit() {
          if (this.ruleForm.username.trim() && this.ruleForm.password.trim()){
            userRequest.login({
                "name": this.ruleForm.username,
                "password": this.ruleForm.password
            }).then(res => {
                uni.setStorageSync('token', res.data.token)
                uni.setStorageSync('usrShopId', res.data.usrShopId)
                uni.showToast({
                    title: "登陆成功",
                    icon: "",
                    duration: 1500
                })
                uni.switchTab({
                    url: '/pages/tabBar/home/index'
                })
            })
          } else {
              uni.showToast({
                  title: "账号密码不能为空",
                  icon: "error",
                  duration: 1500
              })
          }
        },
        handleResign() {
            Dialog.alert({
                message: '请联系客服进行注册',
            }).then(() => {
                // on close
            });
        },
        // 打开客服对话框
        async handleOpenServiceDialog() {
            // on close
            if (!this.serviceConf.mobile) {
                const res = await getServiceConf()
                this.serviceConf = res.data
            }
            await Dialog.alert({
                message: `客服联系方式：${this.serviceConf.mobile}`,
            })
        },
        // 去重置密码
        handleTo() {
            uni.redirectTo({
                url: '/pages/tabBar/my/resetPassword'
            })
        }
    }
}
</script>

<style lang="less">
.login {
    width: 100vw;
    height: 100vh;
    padding: 16px 24px;
    overflow: hidden;
    background-color: #FFFFFF;
    padding-top: 100px;
    .form-item {
        width: 100%;
        border-radius: 6px;
        color: #AEB3C0;
        height: 48px;
        line-height: 48px;
        padding: 0 16px;
        display: flex;
        align-items: center;
        border: 1px solid #E4E4E4;
        margin-bottom: 30px;
        .phcolor {
            color: #AEB3C0;
            font-size: 14px;
        }
    }
    .submit-btn {
        width: 100%;
        height: 48px;
        border-radius: 6px;
        background-color: #5581FA;
        color: #FFFFFF;
        text-align: center;
        line-height: 48px;
        font-size: 14px;
    }
    .tips-box {
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        color: #AEB3C0;
        padding-top: 20px;
    }
}
</style>